<!-- RedPacket.vue -->
<template>
  <div class="container2">
    <div class="main-content2">
      <div class="header2">
        <!--<i class="icon-left"></i>-->
        <span class="header-text">面对面红包</span>
        <span class="header-record">红包记录</span>
      </div>

      <div class="qrcode-box">
        <div class="scan-tip">扫二维码领取红包</div>
        <hr>
        <img :src="qrcode" class="qrcode-img" alt="红包二维码">
        
        <div class="status-info">
          <div class="scan-instruction">扫二维码领取红包</div>
          <div class="progress-info">已领取{{ receivedCount }}/{{ totalCount }}个</div>
        </div>

        <a class="detail-link" @click="viewDetails">查看领取详情 &gt;</a>
      </div>

      <button class="action-btn" @click="createNewPacket">
        <i class="icon-wallet"></i>
        <span>再包一个</span>
        <i class="icon-right"></i>
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'


// 图片资源
import qrcode from '@/assets/qrcode.png'
import leftIcon from '@/assets/left.png'
import rightIcon from '@/assets/right.png'
import walletIcon from '@/assets/wallet.png'

const router = useRouter()

// 响应式数据
const receivedCount = ref(0)
const totalCount = ref(1)

// 方法定义
const viewDetails = () => {
  router.push({name: "Index3"})
}

const createNewPacket = () => {
  console.log('创建新红包')
  // 实际业务逻辑实现
}
</script>

<style scoped>
/* 保持原有样式优化 */
:root {
  --primary-red: #FF4D4D;
  --button-bg: #FFEBEE;
  --text-red: #D81E1E;
}

.main-content2 {
    background: #fff;
    padding: 3%;
    position: relative;
    z-index: 1;
    background: #fe3a3e;
}

.container2 {
  padding: 20px 2px;
  min-height: 100vh;
  background: #fe3a3e;
  font-family: "Microsoft YaHei", sans-serif;
}

.header2 {
  color: #FFF;
  background: #fe3a3e;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  border-bottom: 1px solid #fe3a3e;
  height: 5.5rem;
}

.icon-left {
  background: url('@/assets/left.png') no-repeat;
  width: 24px;
  height: 24px;
}

.header-record {
  color: #e3d4d4;
}

.qrcode-box {
  background: #FFF;
  padding: 15px;
  border-radius: 6px;
  width: 100%;
  margin: 0 auto 18px;
  text-align: center;
}

.qrcode-img {
  width: 160px;
  height: 160px;
  margin: 15px auto;
}

.scan-tip {
  font-size: 14px;
  color: #000;
  margin: 10px 0;
  transform: rotate(180deg);
  /* 使文字水平和垂直居中显示 */
  display: inline-block;
  text-align: center;
}

hr {
  border: 0;
  height: 1px;
  background: #f9f9f9;
  margin: 15px 0;
}

.status-info {
  text-align: center;
  margin: 1rem 0;
}

.scan-instruction {
  font-size: 14px;
  color: #ababab;
  margin: 15px 0;
}

.progress-info {
  font-size: 14px;
  color: #ababab;
  margin: 15px 0;
}

.action-btn {
  background: #fe5a63;
  color: #D81E1E;
  padding: 15px 0px;
  border-radius: 3px;
  width: 100%;
  display: flex;
  /*justify-content: space-between;
  align-items: center;*/
  border-block: none;
  border: none
}

.action-btn span {
  margin-left: 6%;
  width: 20%;
  color: #eddadc;
  font-size: 15px;
}

.icon-wallet {
  background: url('@/assets/wallet.png') no-repeat;
  width: 24px;
  height: 24px;
  margin-left: 4%;
}

.icon-right {
  background: url('@/assets/right.png') no-repeat;
  width: 24px;
  height: 24px;
  margin-left: 60%;
}

.detail-link {
  color: #cfcfcf;
  text-decoration: none;
  display: block;
  text-align: center;
  margin-top: 1rem;
}
</style>